<template>
  <s-layout
    navbar="inner1"
    :bgStyle="{ color: 'transparent' }"
    :onShareAppMessage="shareData"
  >
    <view class="content">
      <assNavbar
        title="鲸喜商户"
        :background="{
				img: sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png'),
				BGcolor: 'transparent'
			}"
      />
      <image
        class="bgTop"
        :src="sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png')"
        mode="widthFix"
      />
      <su-tabs
        :list="tabMaps"
        lineColor="#003288"
        :activeStyle="{ color: '#003288', fontSize: '32rpx' }"
        :inactiveStyle="{ fontSize: '32rpx' }"
        lineHeight="3"
        lineWidth="28"
        :scrollable="false"
        @change="onTabsChange"
        :current="state.current"
      >
      </su-tabs>
      <view
        class="ss-m-x-24"
        style="position:relative"
      >
        <!-- 商家入驻 -->
        <tempalate v-if="state.current == 0">
          <image
            class="cardBox-bg"
            v-if="!state.inviteInfo"
            :src="sheep.$url.cdn('/storage/giveaway/20250316/c138804c391500be619100bd0e1445e2.png')"
            mode="widthFix"
          />
          <view
            v-else
            class="cardBox-bg invite-box"
          >
            <view
              class="ss-m-b-20"
              style="font-size:40rpx"
            >邀请人</view>
            <view>{{state.inviteInfo?.id}}</view>
            <view>{{state.inviteInfo?.nickname}}</view>
            <view>{{state.inviteInfo?.mobile}}</view>
          </view>
          <view class="imgCardBox">
            <view class="title-style">专属权益</view>
            <view
              v-for="(item,index) in state.messageList"
              :key="index"
              class="data-list"
            >
              <view class="ss-flex">
                <view class="img-box">
                  <image
                    class="imgSize"
                    :src="item.bagUrl"
                  />
                  <!-- <image
                    class="imgConSize"
                    :src="item.bgImg"
                  /> -->
                </view>
                <view class="text-style">{{item.text}}</view>
              </view>
              <view
                v-if="index==5&&(state.flag===false||state.flag===2)"
                class="ss-flex"
              >
                <button
                  open-type="share"
                  style="position: absolute;bottom:190rpx;right:20rpx"
                  class="ss-reset-button btn-yao"
                >去邀请</button>
              </view>
              <view
                v-if="index==6&&(state.flag===false||state.flag===2)"
                class="ss-flex"
              >
                <button
                  v-if="!state.invite_phone"
                  @tap="openTel"
                  style="position: absolute;bottom:80rpx;right:20rpx"
                  class="ss-reset-button btn-yao"
                >添加</button>
              </view>
            </view>
          </view>
		  
		  <view style="height:100rpx"></view>
        </tempalate>

        <!-- 我的商户 -->
        <tempalate v-if="state.current == 1">
          <div
            class="list-box"
            v-for="(item,index) in state.list"
            :key="index"
          >
           <div
			  @tap="goshop()"
              class="card-box"
              v-if="item.type==1&&item.status==1"
            >
              <div class="text-mea">商家名称：{{item.merchant_name}}</div>
              <div class="text-mea">商家类型：鲸喜商户</div>
              <div class="text-mea">成为时间：{{item.update_time}}</div>
              <div class="btn-box">
                <button
                  @tap.stop="goPageCli()"
                  class="ss-reset-button btn-apply"
                >支付进行申请</button>
              </div>
            </div>
            <div
              class="card-box"
              v-if="item.type==2"
              @click="goPageCli(item)"
            >
              <div class="text-mea">商家名称：{{item.merchant_name}}</div>
              <div class="text-mea">商家类型：鲸喜商户</div>
              <div class="text-mea">成为时间：{{item.update_time}}</div>

              <div class="ss-flex ss-m-t-20">
                <template v-if="item.status==0">
                  <image
                    style="width:48rpx;height:48rpx"
                    :src="sheep.$url.cdn('/storage/sjrz/20250402/19f29fd99e661ed34504aabd0558650c.png')"
                  />
                  <view class="remark ss-m-l-48">正在申报中</view>
                </template>

                <template v-if="item.status==2">
                  <image
                    style="width:48rpx;height:48rpx"
                    :src="sheep.$url.cdn('/storage/sjrz/20250402/8c82fc00fb44709577e3e842b3f972f8.png')"
                  />
                  <view class="remark">申报失败</view>
                </template>

                <template v-if="item.status==1">
                  <view class="btn-box">
                    <button
                      @tap="openShopDetail(item.id)"
                      class="ss-reset-button btn-yao"
                      style="width:250rpx"
                    >
                      查看支付码
                    </button>
                  </view>
                </template>

              </div>
              <view
                v-if="item.status==2"
                style="color:#666666;font-size:28rpx"
              >
                {{item.remark}}
              </view>
            </div>

            <view
              class="card-box ss-m-t-20"
               v-if="item.status==1&&item.type==2"
            >
              <merchantDetail
                @openLicense="openLicense"
                :jj_id="item.id"
                :rz_id="state.rzList[0].id"
              ></merchantDetail>
            </view>

          </div>

        </tempalate>
      </view>
      <su-fixed
        bottom
        v-if="state.current == 0"
      >
        <!-- <view class="ss-p-x-20  ss-flex justify-between">
					<button class="ss-reset-button btn-translation ss-m-t-40" @click="btnTran()">
						体验入驻
					</button>
				</view> -->
        <view class="ss-p-x-20 ss-p-b-60 ss-flex justify-between">
          <button
            :disabled="state.flag==1"
            class="ss-reset-button btn ss-m-t-40"
            @click='btnClick()'
          >
            {{state.flag===1?'已入驻':
			state.flag===0?'待审核':
			state.flag===2?'已驳回':
			'立即入驻'
			}}
          </button>
        </view>
      </su-fixed>

    </view>

    <su-popup
      :isMaskClick="false"
      @close="state.addTel=false"
      :show="state.addTel"
      type="center"
      backgroundColor="#fff"
      round="10"
    >
      <view class="pop1 text-center">
        <view class="ss-m-b-32">请填写邀请人手机号</view>
        <view style="background:#F1F1F1;padding:0 40rpx;width:100%;box-sizing:border-box">
          <uni-easyinput
            class="input"
            :inputBorder="false"
            v-model="state.invite_phone"
          ></uni-easyinput>
        </view>
        <view class="ss-flex justify-center ss-m-t-32">
          <button
            @tap="handleAddTel"
            class="ss-reset-button btn-yao"
            style="width:214rpx"
          >
            添加
          </button>

        </view>
      </view>
    </su-popup>

    <su-popup
      @close="state.showLicense=false"
      :show="state.showLicense"
      type="center"
      backgroundColor="#fff"
      round="10"
    >
      <image
        style="width:800rpx;height:400rpx;border-radius:20rpx"
        :src="sheep.$url.cdn(state.licenseUrl)"
        mode="widthFix"
      />
    </su-popup>

  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import assNavbar from "@/components/ass-navbar.vue"
import merchantDetail from "@/pages/commission/components/merchant-detail.vue"
import { ref, reactive, computed, onBeforeMount, nextTick } from 'vue'
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import userApi from "@/sheep/api/user.js"
import { showShareModal } from '@/sheep/hooks/useModal';

const sys_navBar = sheep.$platform.navbar;//标题栏高度
const state = reactive({
  type: 0,
  current: 0,
  list: [],
  flag: false,
  invite_phone: '',//被邀请人手机号
  shareInfo: {},
  inviteInfo: null,
  isRz:false,
  rzList: [],
  showDetail: false,
  shopDetail: {},
  licenseUrl: '',
  showLicense: false,
  messageList: [
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/0ee3f6c370c5c47189238af9983962af.png', text: '流量推广扶持' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/0e397156dc4540a701e0c6804c3f4d71.png', text: '用户私域群管理' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/148f2c243362a6f5cce3373db165f9c0.png', text: '私域营销工具扶持' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/1d1d00fc6785d4711fca23be2c83ce29.png', text: '团购，社群推广扶持' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/d7f892935674e35c1594b952e7c85b9e.png', text: '技术服务见面扶持' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/78420de13d1881fa815726466ed16c4e.png', text: '我是商务，去帮助商家入驻' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/e842317f7e67a7ddbabcf92a4369a590.png', text: '我是商家，填写邀请人' }
  ]

})


const tabMaps = [

  {
    name: '商户入驻',
    value: 0,
  },
  {
    name: '我的商户',
    value: 1,
  }
];
// 切换选项卡
function onTabsChange (e) {
  state.current = e.index;
}


// 查看资质
function openLicense (url) {
  state.showLicense = true
  state.licenseUrl = url
}

function btnClick () {
	var inviteInfo = JSON.stringify(state.inviteInfo)//根据填写的手机号获取的信息
	if(state.flag===false){
		sheep.$router.go('/pages/commission/merchant/apply', {
		  type: 0,//0自己入驻  1代理帮忙入驻
		  shopType: 3,
		  inviteInfo
		})
	}else if(state.flag===2){
		sheep.$router.go('/pages/commission/merchant/result',{serve:3,inviteInfo})
	}else{
		sheep.$router.go('/pages/commission/merchant/result',{serve:3})
	}
  

}
function btnTran (item) {
  sheep.$router.go('/pages/merchant/apply_for_pay', {
  })
}
function goPageCli (item) {
	// if(item.type==2&&item.status==1){//进件成功时，跳转商家详情页
	// 	sheep.$router.go('/pages/commission/merchant/surpriseForm', { type: 0,id:item?.id })
	// }
  sheep.$router.go('/pages/commission/merchant/surpriseForm', { type: 0,id:item?.id })
}

async function openShopDetail () {
  // state.showDetail = true
  sheep.$router.go('/pages/merchant/pay_code')
}

async function getList () {
  const res = await sheep.$api.commission.merchant.applyList({
    serve: 3,//惊喜
    type: 2,//1入驻  2进件
	mobile:sheep.$store('user').userInfo.mobile
  })
  state.list = res.data

  const res2 = await sheep.$api.commission.merchant.applyList({
    serve: 3,//惊喜
    type: 1,//1入驻  2进件
	mobile:sheep.$store('user').userInfo.mobile
  })

  state.rzList = res2.data

	if(res2.data.length>0){//取最新的一条入驻记录
		state.flag = res2.data[0].status
	}
 
  if (res.data.length == 0) {
	state.isRz=true
    state.list = res2.data
  }
}

// 打开填写手机号的弹窗
function openTel () {
  state.addTel = true
}

async function handleAddTel () {
  state.addTel = false
  await getInviteInfo(state.invite_phone)
  if (!state.inviteInfo) {
    uni.showToast({
      title: '该手机号未找到，请重新填写',
      icon: 'none',
      duration: 2000
    })
    state.invite_phone = ''
  } else {
    uni.setStorageSync('invite_phone', state.invite_phone);
  }
}
function goshop(){
	sheep.$router.go('/pages/merchant/surprise/list',{keyword:state.rzList[0].merchant_name})
}

const shareData = computed(() => ({
  title: '帮我入驻',
  path: `/pages/commission/merchant/apply?writeType=invite&shopType=3&&type=1`,
  // imageUrl:''
}))


async function getInviteInfo (phone) {
  const res = await sheep.$api.commission.merchant.getInviteInfo({
    phone
  })
  if (res.error == 0) {
    state.inviteInfo = res.data

  }
}

onLoad((opt) => {
  state.type = opt.type

  state.invite_phone = uni.getStorageSync('invite_phone') || ''
  if (state.invite_phone) {
    getInviteInfo(state.invite_phone)
  }
})
onShow(() => {
  getList()
})



</script>

<style lang="scss" scoped>
.imgCardBox {
  padding: 28rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 28rpx;
  position: relative;
  margin-bottom: 200rpx;
  .title-style {
    font-size: 32rpx;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 19rpx;
  }
  .data-list {
    margin-bottom: 36rpx;
    .img-box {
      position: relative;
      .imgSize {
        width: 85rpx;
        height: 70rpx;
      }
      .imgConSize {
        width: 59rpx;
        height: 41rpx;
        position: absolute;
        top: 12rpx;
        left: 17rpx;
        margin: 0 auto;
      }
    }

    .text-style {
      margin-left: 48rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 131.43%;
    }
  }
}
.invite-box {
  background: linear-gradient(268deg, #5782e3 77%, rgba(87, 129, 227, 0) 102%);
  border-radius: 20rpx;
  color: #fff;
  font-size: 30rpx;
  padding: 30rpx;
  box-sizing: border-box;
  line-height: 1.5em;
}
.list-box {
  padding: 0 24rpx 0 24rpx;
  position: absolute;
  top: 50rpx;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}

.card-box {
  border-radius: 20rpx;
  background-color: #ffffff;
  padding: 30rpx 30rpx 20rpx 30rpx;
  z-index: 99999;
  box-sizing: border-box;
}

.text-mea {
  width: 100%;
  font-size: 28rpx;
  height: 40rpx;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #616665;
  margin-bottom: 10rpx;
}
.pop1 {
  padding: 30rpx 22rpx 18rpx 22rpx;
  font-size: 32rpx;
  width: 600rpx;
  min-height: 176px;
  box-sizing: border-box;
  .my-btn {
    width: 132rpx;
    height: 56rpx;
    border-radius: 20rpx;
    color: #fdfdfd;
    background: #ff9000;
    font-size: 32rpx;
    margin-top: 82rpx;
  }
  .input {
    :deep().uni-easyinput__content-input {
      height: 50rpx;
      font-size: 32rpx;
    }
  }
}
.btn-box {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-top: 20rpx;
}

.btn-apply {
  border-radius: 10rpx;
  width: 190rpx;
  height: 60rpx;
  background: linear-gradient(288deg, #05d5bf 0%, #06c2ae 50%, #a2cefd 100%);
  font-size: 28rpx;
  display: flex;
  align-items: center;
  padding: 10rpx;
  color: #ffffff;
  border: none !important;
}



.btn-yao {
  width: 130rpx;
  height: 60rpx;
  border-radius: 10rpx;
  background: linear-gradient(295deg, #05d5bf 0%, #06c2ae 50%, #a2cefd 100%);
  font-size: 28rpx;
  color: #fff;
}
.bgTop {
  width: 100%;
  height: 331rpx;
  margin-top: v-bind('-sys_navBar + "px"');
  margin-bottom: -200rpx;
  background-color: #a6c4f7;
  background-image: linear-gradient(180deg, #a6c4f7 5%, #d7d2fa 68%, #ffffff 100%);
}

:deep().u-tabs {
  background: transparent !important;
  border: none !important;
  margin-top: -40rpx !important;
  margin-bottom: 10rpx;
}

.cardBox-bg {
  width: 100%;
  height: 295rpx;
}

.infoCard {
  width: 100%;
  margin-top: 30rpx;
}

.btn {
  width: 702rpx;
  height: 80rpx;
  background: #003288;
  border-radius: 49rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.btn-translation {
  width: 702rpx;
  height: 80rpx;
  color: #003288;
  // background: #003288;
  // border-radius: 49rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.btn[disabled] {
  background: rgba(115, 121, 136, 0.4) !important;
}
.remark {
  margin-left: 20rpx;
  color: #3d3d3d;
  font-weight: bold;
}
</style>